
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="../css/eui.css">


    <style>
        /*去掉自带的内边距*/
        /*.el-table .el-table__cell{*/
        /*    padding: 0;*/
        /*}*/

        #hot:hover{
            color: #E6A23C;
        }

    </style>
</head>
<body style="background-color: #F2F6FC;margin: 0">
<div id="app">
<el-container>
    <el-header style="padding: 0;height: 80px; width: 100%">
        <div style="background-color: white;position: fixed;width: 100%;z-index: 2">
            <div  style="width: 1400px;margin: 0 auto;left: 250px;">
                  <img src="imgs/icon.png" width="90" height="70" style="margin: 0" alt="">
    <!--            搜索框-->
                <div style="margin-top: 10px;float: left;position: relative;left: 300px;top: 10px">
                    <el-input size="medium" placeholder="请输入内容" style=""></el-input>
                    <el-button icon="el-icon-search" style="position: absolute;padding: 0; border: 0;right: 10px;top: 8px;background-color: rgba(0,0,0,0)" ></el-button>
                </div>
    <!--            导航栏-->
                <div   style="width: 700px;float: right;text-align: center;margin-right: 100px">
                  <el-menu
                      default-active="1"
                      class="el-menu-demo"
                      mode="horizontal"
                      @select="topSelect"
                      text-color="black"
                      active-text-color="#ffd04b">
                      <el-menu-item index="1" style="width: 150px"><i style="font-size: 30px" class="el-icon-s-home"></i></el-menu-item>
                      <el-menu-item index="2" style="width: 150px"><i style="font-size: 30px" class="el-icon-sunny"></i></el-menu-item>
                      <el-menu-item index="3" style="width: 150px"><i style="font-size: 30px" class="el-icon-video-camera-solid"></i></el-menu-item>
                      <el-menu-item index="4" style="width: 150px"><i style="font-size: 30px" class="el-icon-user-solid"></i></el-menu-item>
                  </el-menu>

                </div>
            </div>
        </div>
    </el-header>
    <el-main style="width: 1100px;margin: 0 auto;padding-top: 5px">
        <el-row>

<!--            左边导航栏-->
            <el-col span="6" style="">
                <div style="position: fixed">
                   <el-card style="width: 200px;height: 850px">
                       <b style="font-size: 20px">首页</b>
                       <el-menu
                        default-active="1"
                        class="el-menu-vertical-demo"
                        @select="leftSelect"
                        active-text-color="#ffd04b">
                           <el-menu-item index="1"><i class="el-icon-s-unfold"></i>全部关注</el-menu-item>
                           <el-menu-item index="2"><i class="el-icon-star-on"></i>最新动态</el-menu-item>
                           <el-menu-item index="3"><i class="el-icon-s-custom"></i>特别关注</el-menu-item>
                           <el-menu-item index="4"><i class="el-icon-s-comment"></i>好友发布</el-menu-item>
                           <el-divider></el-divider>
                           <p style="font-size: 17px">分组</p>
                           <el-menu-item index="5"><i class="el-icon-milk-tea"></i>美食</el-menu-item>
                           <el-menu-item index="6"><i class="el-icon-location-information"></i>景点</el-menu-item>
                           <el-menu-item index="7"><i class="el-icon-watermelon"></i>特产</el-menu-item>
                           <el-menu-item index="8"><i class="el-icon-user"></i>人文</el-menu-item>
                       </el-menu>
                   </el-card>
                </div>
            </el-col>

<!--            中间主题部分-->
            <el-col span="12" >
                <div style="margin-left: 180px;width: 600px">
                    <template>
                        <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
                            <el-card style="height: 260px;margin-bottom: 20px" v-for="i in artical" class="infinite-list-item">{{i.text}} <img
                                    :src="i.url" alt="" style=""></el-card>
                        </ul>
                    </template>
                </div>

            </el-col >
            <el-col span="6">

<!--                热搜榜-->
                <div style="margin-left: 270px;width:250px;position: fixed">
                        <el-card style="">
                            <b style="font-size: 15px">热搜榜单</b>
                            <div>
                            <el-table :data="hotSearch" style="">
                                <el-table-column type="index" style=""></el-table-column>
                                <el-table-column>
                                    <template slot-scope="scope">
                                        <a :href="scope.row.url" style="text-decoration: none;color: #333;font-size: 15px;font-weight: bold" id="hot">{{scope.row.title}}</a>
                                    </template>
                                </el-table-column>
                            </el-table>
                            </div>
                        </el-card>
                </div>
            </el-col>
        </el-row>
    </el-main>
</el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="../js/vue.js"></script>
<!-- import JavaScript -->
<script src="../js/eui.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function() {
            return {
                count: 0,
                hotSearch:[
                    {title:"抚仙湖惊现水下古城",url:""},
                    {title:"抚仙湖惊现水下古城",url:""},
                    {title:"抚仙湖惊现水下古城",url:""},
                    {title:"抚仙湖惊现水下古城",url:""},
                    {title:"抚仙湖惊现水下古城",url:""},
                    {title:"抚仙湖惊现水下古城",url:""},
                    {title:"抚仙湖惊现水下古城",url:""},
                    {title:"抚仙湖惊现水下古城",url:""},
                    {title:"抚仙湖惊现水下古城",url:""},
                    {title:"抚仙湖惊现水下古城",url:""},
                ],
                artical:[
                    {text:"抚仙湖惊现水下古城",url:"imgs/fuxian.jpg"},
                    {text:"抚仙湖惊现水下古城",url:"imgs/fuxian.jpg"},
                    {text:"抚仙湖惊现水下古城",url:"imgs/fuxian.jpg"},
                    {text:"抚仙湖惊现水下古城",url:"imgs/fuxian.jpg"},
                    {text:"抚仙湖惊现水下古城",url:"imgs/fuxian.jpg"},
                    {text:"抚仙湖惊现水下古城",url:"imgs/fuxian.jpg"},
                ]
            }
        },
        methods:{
            topSelect(index){

            },
            leftSelect(index){

            },
            load () {
                this.count += 2
            }
        }
    })
</script>
</html>

